<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
    <title>业务管理</title>
    <meta name="decorator" content="default"/>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#ids").click(function () {
                var ss =$(this).data("id");
                $.ajax({
                    type: "POST",
                    url: "${ctx}/sys/business/business/getkfMaps",
                    data: {"kfId":ss},
                    dataType: "json",
                    success: function(shu){
                        console.log(shu);
                        var zt = [];
                        var sums = [];
                        var myChart = echarts.init(document.getElementById('map'));
                        for (var key in shu) {
                            zt.push(key);
                            sums.push(shu[key]);
                        }
                        var zt1 = ["已接单","回访客户中","已受理","调查中","协调中","审批中","已受理"];
                        console.log(zt);
                        console.log(sums);
                        var option = {
                            title: {
                                text: '当前客服案件统计 单位：件',
                            },
                            tooltip : {
                                trigger: 'axis',
                                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                },
                                formatter: function (params) {
                                    var tar = params[1];
                                    return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
                                }
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: {
                                type : 'category',
                                splitLine: {show:false},
                                data : zt1
                            },
                            yAxis: {
                                type : 'value'
                            },
                            series: [
                                {
                                    name: '辅助',
                                    type: 'bar',
                                    stack:  '总量',
                                    itemStyle: {
                                        normal: {
                                            barBorderColor: 'rgba(0,0,0,0)',
                                            color: 'rgba(0,0,0,0)'
                                        },
                                        emphasis: {
                                            barBorderColor: 'rgba(0,0,0,0)',
                                            color: 'rgba(0,0,0,0)'
                                        }
                                    },
                                    data: [0, 0, 0, 0, 0, 0, 0]
                                },
                                {
                                    name: '处理中',
                                    type: 'bar',
                                    stack: '总量',
                                    label: {
                                        normal: {
                                            show: true,
                                            position: 'inside'
                                        }
                                    },
                                    data:sums
                                }
                            ]
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    }
                })

            })
            $("#ids").trigger("click");

        });
    </script>
</head>
<body>

<table  id="contentTable" class="table table-striped table-bordered table-condensed">
    <thead>
    <tr>
        <td>状态</td>
        <td>统计</td>
    </tr>
    </thead>
<tbody>
<c:forEach items="${maps}" var="mapvalue">
    <tr class="dian">
        <td><a href="#" id="ids" data-id=${kfId}>
                ${fns:getDictLabel(mapvalue.zt, 'business_static', '')}
        </a></td>
        <td><a href="#" class="kfs">
                ${mapvalue.num}
        </a></td>
    </tr>
</c:forEach>
<tr>
    <td colspan="3" id="map" style="width: 500px;height:300px;"></td>
</tr>
</tbody>
</table>

</body>
</html>